<template>
  <el-card shadow="never" :style="{border: 'none'}">
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-position="top"
      :layout="isMobile() ? 'vertical' : 'horizontal'"
    >
      <el-form-item label="角色名称" prop="roleName">
        <el-row :gutter="16">
          <el-col :span="form.roleId ? 16 : null">
            <el-input
              v-model="form.roleName"
              :class="[ mdl.roleId ? '' : '' ]"
              placeholder="请填写角色名称"
            />
          </el-col>
          <el-col :span="8" v-show="form.roleId">
            <el-tooltip class="item" effect="dark" content="新增加一个角色，复制该角色的权限和菜单" placement="top">
              <el-button type="primary" @click="handleCopyAdd">复制新增</el-button>
            </el-tooltip>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select clearable style="width: 100%" v-model="form.state" placeholder="请选择">
          <el-option :value="0" label="正常" />
          <el-option :value="1" label="禁用" />
        </el-select>
      </el-form-item>

      <el-form-item label="备注说明" prop="remark">
        <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="form.remark"></el-input>
      </el-form-item>

      <!-- <a-form-item label="拥有权限">
        <a-row :gutter="16" v-for="(permission, index) in permissions" :key="index">
          <a-col :xl="6" :lg="24">{{ permission.permissionShowName }}：</a-col>
          <a-col :xl="18" :lg="24">
            <a-checkbox
              v-if="permission.actionsOptions.length > 0"
              :indeterminate="permission.indeterminate"
              :checked="permission.checkedAll"
              @change="onChangeCheckAll($event, permission)"
            >全选</a-checkbox>
            <a-checkbox-group
              :options="permission.actionsOptions"
              v-model="permission.selected"
              @change="onChangeCheck(permission)"
            />
          </a-col>
        </a-row>
      </a-form-item>-->
      <el-form-item class="tl-center">
        <el-button class="mr20" size="large" @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSure" size="large">{{ isEdit ? '修改' : '新增'}}</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import pick from 'lodash.pick'
import { getPermissions } from '@/api/manage'
import { qeuryPermission, saveRoleInfo } from '@/api/role'
import { actionToObject } from '@/utils/permissions'
import { openNotification } from '@/utils/util'

export default {
  mixins: [mixinDevice],
  data() {
    return {
      name: '',
      form: {},
      rules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
      },
      permissions: [],
      mdl: {},
      isEdit: false,
      checkedArr: [],
      saveAllPermissions: [],
      sysPermissionId: '',
      menuId: ''
    }
  },
  methods: {
    handleReset() {
      this.$nextTick(() => {
        // this.$refs.form.resetFields()
        this.form.roleName = null
        this.form.state = null
        this.form.remark = null
      })
      this.$emit('reset')
    },
    handleCopyAdd() {
      this.$emit('changeRole')
      this.$nextTick(() => {
        this.$refs.form.resetFields()
      })
      this.isEdit = false
    },
    getKeys(arr) {
      this.$set(this.form, 'menuId', arr.join(','))
    },
    getPermissionKeys(arr) {
      this.$set(this.form, 'sysPermissionId', arr.join(','))
    },
    // 新增/修改 事件点击
    async handleSure(e) {
      e.stopPropagation()
      this.$refs.form.validate(async valid => {
        if (valid) {
          const res = await saveRoleInfo(this.form)
          // 新增重新获取一下左侧列表
          if (!this.isEdit) {
            this.$emit('refreshList')
          }
          // 清空列表，菜单和权限
          if (res.state === '000000') {
            this.$refs.form.resetFields()
            this.$emit('treeClear', [])
            const mes = this.isEdit ? '修改操作成功' : '新增操作成功'
            openNotification('success', mes)
          }
        }
      })
    },
    clearInfo() {
      this.form.resetFields()
      // 每次点击左侧列表得先循环置空一下selected
      this.permissions.map(v => {
        this.$set(v, 'selected', [])
        this.$set(v, 'indeterminate', false)
        this.$set(v, 'checkedAll', false)
      })
    },
    handleCheckChange(e, item) {
      const index = this.checkedArr.findIndex(v => v === item.permissionId)
      // 勾选且在数组中不存在，则添加到数组
      if (e.target.checked && index < 0) {
        this.checkedArr.push(item.permissionId)
      } else {
        this.checkedArr.splice(index, 1)
      }
    },
    handleSetFields(mdl, permissions) {
      if (mdl.roleId === undefined) {
        this.isEdit = false
      } else {
        this.isEdit = true
      }
      this.mdl = Object.assign({}, mdl)
      this.form = Object.assign({}, mdl)
    }
  }
}
</script>

<style scoped>
.w360-mr20 {
  width: 300px;
  margin-right: 20px;
}
</style>
